<template>
    <div class="classification">
        <div class="header">
            <div class="jd-header">
                <div class="header-left" @click="goback()">
                    <span></span>
                </div>
                <div class="header-center">
                    <i></i>
                    <div class="search-input"></div>
                </div>
            </div>
        </div>

        <div class="main">
            <mt-navbar v-model="selected">
				<div class="leftlist">
				  <mt-tab-item id="1">热门推荐</mt-tab-item>
				  <mt-tab-item id="2">手机数码</mt-tab-item>
				  <mt-tab-item id="3">电脑办公</mt-tab-item>
				  <mt-tab-item id="4">家用电器</mt-tab-item>
				  <mt-tab-item id="5">计生情趣</mt-tab-item>
				  <mt-tab-item id="6">美妆护肤</mt-tab-item>
				  <mt-tab-item id="7">个护清洁</mt-tab-item>
				  <mt-tab-item id="8">汽车生活</mt-tab-item>
				  <mt-tab-item id="9">京东超市</mt-tab-item>
				  <mt-tab-item id="10">男装</mt-tab-item>
				  <mt-tab-item id="11">男鞋</mt-tab-item>
				  <mt-tab-item id="12">女装</mt-tab-item>
				  <mt-tab-item id="13">女鞋</mt-tab-item>
				  <mt-tab-item id="14">母婴童装</mt-tab-item>
				  <mt-tab-item id="15">酒水饮料</mt-tab-item>
				  <mt-tab-item id="16">家具家装</mt-tab-item>
				  <mt-tab-item id="17">家居厨具</mt-tab-item>
				  <mt-tab-item id="18">箱包手袋</mt-tab-item>
				  <mt-tab-item id="19">钟表珠宝</mt-tab-item>
				  <mt-tab-item id="20">玩具乐器</mt-tab-item>
				  <mt-tab-item id="21">医药保健</mt-tab-item>
				  <mt-tab-item id="22">宠物生活</mt-tab-item>
				  <mt-tab-item id="23">礼品鲜花</mt-tab-item>
                  <mt-tab-item id="24">农资绿植</mt-tab-item>
                  <mt-tab-item id="25">生活旅行</mt-tab-item>
                  <mt-tab-item id="26">奢侈品</mt-tab-item>
                  <mt-tab-item id="27">京东国际</mt-tab-item>
                  <mt-tab-item id="28">艺术邮币</mt-tab-item>
                  <mt-tab-item id="29">二手商品</mt-tab-item>
                  <mt-tab-item id="30">特产馆</mt-tab-item>
                  <mt-tab-item id="31">京东金融</mt-tab-item>
                  <mt-tab-item id="32">国际名牌</mt-tab-item>
                  <mt-tab-item id="33">拍卖</mt-tab-item>
                  <mt-tab-item id="34">房产</mt-tab-item>
                  <mt-tab-item id="35">工业品</mt-tab-item>
				</div>
			</mt-navbar>

            <!-- table-container -->
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class="product" v-for="(v,i) in classlist1">
                        <p class="current">
                            {{v.title}}
                            <router-link to="/">
                                <img :src="v.icon1"/>
                                {{v.span}}
                                <img :src="v.icon2"/>
                            </router-link>
                        </p>
                        <ul class="listitem">
                            <li v-for="a in v.info">
                                <router-link to="/">
                                    <div class="pic">
                                        <img :src="a.imgSrc"/>
                                    </div>
                                    <p>{{a.name}}</p>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>

                <mt-tab-container-item id="2">
                    <div class="product" v-for="(v,i) in classlist2">
                        <p class="current">
                            {{v.title}}
                            <router-link to="/">
                                <img :src="v.icon1"/>
                                {{v.span}}
                                <img :src="v.icon2"/>
                            </router-link>
                        </p>
                        <ul class="listitem">
                            <li v-for="a in v.info">
                                <router-link to="/">
                                    <div class="pic">
                                        <img :src="a.imgSrc"/>
                                    </div>
                                    <p>{{a.name}}</p>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>

                <mt-tab-container-item id="3">
                    <div class="product" v-for="(v,i) in classlist3">
                        <p class="current">
                            {{v.title}}
                            <router-link to="/">
                                <img :src="v.icon1"/>
                                {{v.span}}
                                <img :src="v.icon2"/>
                            </router-link>
                        </p>
                        <ul class="listitem">
                            <li v-for="a in v.info">
                                <router-link to="/">
                                    <div class="pic">
                                        <img :src="a.imgSrc"/>
                                    </div>
                                    <p>{{a.name}}</p>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>

                <mt-tab-container-item id="4">
                    <div class="product" v-for="(v,i) in classlist4">
                        <p class="current">
                            {{v.title}}
                            <router-link to="/">
                                <img :src="v.icon1"/>
                                {{v.span}}
                                <img :src="v.icon2"/>
                            </router-link>
                        </p>
                        <ul class="listitem">
                            <li v-for="a in v.info">
                                <router-link to="/">
                                    <div class="pic">
                                        <img :src="a.imgSrc"/>
                                    </div>
                                    <p>{{a.name}}</p>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>
                
                <mt-tab-container-item id="5">
                    <div class="product" v-for="(v,i) in classlist5">
                        <p class="current">
                            {{v.title}}
                            <router-link to="/">
                                <img :src="v.icon1"/>
                                {{v.span}}
                                <img :src="v.icon2"/>
                            </router-link>
                        </p>
                        <ul class="listitem">
                            <li v-for="a in v.info">
                                <router-link to="/">
                                    <div class="pic">
                                        <img :src="a.imgSrc"/>
                                    </div>
                                    <p>{{a.name}}</p>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>

                <mt-tab-container-item id="6">
                    <div class="product" v-for="(v,i) in classlist6">
                        <p class="current">
                            {{v.title}}
                            <router-link to="/">
                                <img :src="v.icon1"/>
                                {{v.span}}
                                <img :src="v.icon2"/>
                            </router-link>
                        </p>
                        <ul class="listitem">
                            <li v-for="a in v.info">
                                <router-link to="/">
                                    <div class="pic">
                                        <img :src="a.imgSrc"/>
                                    </div>
                                    <p>{{a.name}}</p>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show1:false,
            classlist1:{},
            classlist2:{},
            classlist3:{},
            classlist4:{},
            classlist5:{},
            classlist6:{},
            selected:"1"
        }
    },
    methods:{
        forward(){
            this.$router.push('/classification');
        },
        goback(){
            this.$router.go(-1)
        }
    },
    mounted(){
            this.$http.get('./data/classification.json')
            .then((response)=>{
                console.log(response.data);
                this.classlist1=response.data.classlist1;
                this.classlist2=response.data.classlist2;
                this.classlist3=response.data.classlist3;
                this.classlist4=response.data.classlist4;
                this.classlist5=response.data.classlist5;
                this.classlist6=response.data.classlist6;
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .then(function () {
                // always executed
		   });
        }
    }

</script>

<style scoped>
    /* .classification{
        margin-top: -60px;
    } */
    .classification .header .jd-header{
        position: relative;
        border-bottom: 1px solid #e5e5e5;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .classification .header{
        z-index: 969;
        width: 100%;
        background-color: #fff;
        margin: 0 auto;
        position: relative;
    }
    .classification .header .header-left{
        z-index: 120;
        width: 40px;
        height: 44px;
        overflow: hidden;
    }
    .classification .header .header-left span{
        background: url() no-repeat;
        margin: 12px 0 0 10px;
        width: 20px;
        height: 20px;
        display: block;
        background-size: 100% 100%;
    }
    .classification .header-center{
        margin-top: 7px;
        height: 30px;
        position: relative;
        margin-right: 32px;
        width: 60%;
    }
    .classification .header-center i{
        display: block;
        width: 18px;
        height: 15px;
        background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
        background-position: -80px 0;
        background-size: 200px;
        margin: 8px 0 0 15px;
        position: relative;
        z-index: 1;
        float: left;
    }
    .classification .header-center .search-input{
        display: inline-block;
        width: 100%;
        border: none;
        border-radius: 15px;
        height: 30px;
        overflow: hidden;
        background: #f7f7f7;
        font-size: 12px;
        /* -webkit-box-align: center; */
        line-height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 35px;
        padding-right: 10px;
    }
    .classification{
        overflow-x: auto;
    }
    .classification .main .leftlist{
        width: 100%;  
    }
    .classification .main{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .classification .main .mint-navbar{
        width: 25%;
        background: #f8f8f8;
        height: auto;
        overflow-y: auto;
        min-height: 100%;
        height: calc(100vh - 45px);
    }
    .classification .main .mint-tab-container{
        width: 75%;
        height: calc(100vh - 45px);
        overflow: auto;   
    }
    .classification .mint-navbar .mint-tab-item.is-selected{
        color: #e93b3d;
        border-bottom: 3px solid #fff;
	    background: white;
    }
    .classification .main .mint-navbar .mint-tab-item-label{
        font-size: 14px;
    }
    .classification .main .mint-tab-container .product{
        margin: 19px 7px 0;
    }
    .classification .main .mint-tab-container .product .current{
        text-align: left;
        font-weight: 600;
    }
    .classification .main .mint-tab-container .product .listitem{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin-top: 9px;
        padding: 7px 10px 0;
        overflow: hidden;
        transform: all 0.2 ease 0s;
    }
    .classification .main .mint-tab-container .product .listitem a{
        text-decoration: none;
    }
    .classification .main .mint-tab-container .product .listitem li{
        width: 32.8%;
        text-align: center;
    }
    .classification .main .mint-tab-container .product .listitem li img{
        width: 70px;
        height: 70px;
    }
    .classification .main .mint-tab-container .product .listitem li p{
        color: #333;
        height: 35px;
        margin-top: 2px;
        -webkit-box-pack: start;
        font-size: 12px;
    }
    .classification .main .current a{
        float: right;
        font-size: 12px;
        text-decoration: none;
        color: #848689;
    }
    .classification .main .current a img{
        width: 12px;
    }
    ::-webkit-scrollbar {/*隐藏滚轮*/
		display: none;
	}
</style>